<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>结账退房</title>
    <link href="/static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/select.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery.idTabs.min.js"></script>
    <script type="text/javascript" src="/static/js/select-ui.min.js"></script>
    <script type="text/javascript" src="/static/editor/kindeditor.js"></script>
    <script type="text/javascript" src="/static/js/laydate/laydate.js"></script>
    <script type="text/javascript">
        KE.show({
            id: 'content7',
            cssPath: './index.css'
        });
    </script>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script type="text/javascript">

        $(document).ready(function (e) {
            $(".select1").uedSelect({
                width: 345
            });
            $(".select2").uedSelect({
                width: 167
            });
            $(".select3").uedSelect({
                width: 100
            });


        });


    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>首页</li>
        <li>入住信息管理</li>
        <li>结账退房</li>
    </ul>
</div>
<div class="formbody">
    <div class="formtitle"><span>消费信息</span></div>
    <div id="usual1" class="usual">
        <div id="tab1" class="tabson">
            <ul class="forminfo">
                <li>
                    <label>房间号<b>*</b></label>
                    <div class="vocation">
                        <select id="roomId" class="select1" name="roomId" v-model="roomId"
                                @change="findOutRoomInfoByRoomId">
                            <option>--请选择--</option>
                            <option :value="room.id" v-for="room in roomList">
                                {{room.roomNum}}
                            </option>
                        </select>
                    </div>
                </li>
                <li style="margin-top:20px;">
                    <label for="customer_name">客人姓名<b>*</b></label>
                    <div class="vocation">
                        <input name="customerName" v-model="customerName" readonly="readonly" type="text"
                               class="dfinput"
                               style="width:344px;"/>
                    </div>
                </li>
                <br/> <br/>
                <li>
                    <label for="price" style="cursor:pointer">房型<b>*</b></label>
                    <div class="vocation">
                        <input name="roomType" v-model="roomTypeName" id="roomType" class="dfinput" value=""
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="price" style="cursor:pointer">单价<b>*</b></label>
                    <div class="vocation">
                        <input name="price" v-model="roomPrice" id="price" class="dfinput" value=""
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="yajin" style="cursor:pointer">押金<b>*</b></label>
                    <div class="vocation">
                        <input name="money" v-model="money" id="yajin" type="text" class="dfinput" value="押金"
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="qita" style="cursor:pointer">其他消费<b>*</b></label>
                    <div class="vocation">
                        <input name="qita" v-model="otherMoney" id="qita" type="text"
                               class="dfinput" value="0"
                               style="width:344px;" @change="computerCost"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="date1" style="cursor:pointer">入住时间<b>*</b></label>
                    <div class="vocation">
                        <input name="inTime" v-model="checkinTime" id="date1" class="dfinput" value="2016-06-01"
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="Calendar" style="cursor:pointer">退房时间<b>*</b></label>
                    <div class="vocation">
                        <input readonly="readonly" name="createDate" v-model="createDate" type="text"
                               class="laydate-icon span1-1" id="Calendar"
                               style="width:324px; height:30px; line-height:28px; text-indent:10px; "/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="date1" style="cursor:pointer">入住天数<b>*</b></label>
                    <div class="vocation">
                        <input name="days" v-model="days" type="text" class="dfinput" readonly="readonly"
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label for="Calendar" style="cursor:pointer">优惠金额<b>*</b></label>
                    <div class="vocation">
                        <input name="yh" v-model="vipRate" readonly="readonly" type="text" class="dfinput" value="0"
                               style="width:344px;"/>
                    </div>
                    <br/>
                </li>
                <li>
                    <label for="Calendar" style="cursor:pointer">总金额<b>*</b></label>
                    <div class="vocation">
                        <input name="cost" v-model="cost" readonly="readonly" type="text" class="dfinput" value="0"
                               style="width:344px;"/>
                    </div>
                </li>
                <br/>
                <li>
                    <label>&nbsp;</label>
                    <input type="hidden" v-model="iriId" name="iriId"/>
                    <input @click="outRoom" type="submit" class="btn" value="提交"/>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        const vue1 = new Vue({
            el: "#tab1",
            data: {
                roomId: '',
                roomList: [],
                customerName: '',
                roomTypeName: '',
                roomPrice: '',
                money: '',
                otherMoney: '',
                checkinTime: '',
                createDate: new Date(),
                days: '',
                vipRate: '',
                cost: '',
                iriId: ''
            },
            methods: {
                outRoom() {
                    var dataJson = {
                        "roomId": this.roomId,
                        "iriId": this.iriId,
                        "cost": this.cost,
                        "createDate": this.createDate
                    };
                    this.$http.post("/outRoom.do", dataJson).then(
                        function (rs) {
                            if (rs.data) {
                                window.location.href = "/getInRoomInfo.do"
                            } else {
                                window.alert("退房失败，请重试");
                            }
                        },
                        function (err) {
                            window.alert("out.html数据请求失败");
                        }
                    );
                },
                findOutRoomInfoByRoomId() {
                    this.$http.post("/findOutRoomInfoByRoomId.do?roomId=" + this.roomId).then(
                        function (rs) {
                            this.customerName = rs.data.customerName;
                            this.roomTypeName = rs.data.roomTypeName;
                            this.roomPrice = rs.data.roomPrice;
                            this.money = rs.data.money;
                            this.otherMoney = rs.data.otherMoney == null ? 0 : rs.data.otherMoney;
                            this.checkinTime = rs.data.checkinTime;
                            this.days = rs.data.days;
                            this.vipRate = rs.data.vipRate == null ? 1 : rs.data.vipRate;
                            this.cost = rs.data.cost == null ? this.vipRate * (this.roomPrice * this.days + this.otherMoney) : 0;
                            this.iriId = rs.data.iriId;
                        }
                    );
                },
                computerCost() {
                    this.cost = parseFloat(this.vipRate) * (parseFloat(this.days) * parseFloat(this.roomPrice) + parseFloat(this.otherMoney));
                }
            },
            mounted() {
                this.$http.post("/getRoomsByStatus.do").then(
                    function (rs) {
                        this.roomList = rs.data;
                    }
                );
            }
        });

        /*jQuery(function () {
            jQuery("#roomId").change(function () {
                //获取房间id
                var roomId = jQuery(this).find("option:selected").val();
                jQuery.ajax({
                    url: "/findOutRoomInfoByRoomId.do?roomId=" + roomId,
                    type: "post",
                    dataType: "json",
                    data: {
                        "roomId": JSON.stringify(roomId)
                    },
                    success: function (rs) {
                        jQuery("input[name=customerName]").val(rs.data.customerName);
                        jQuery("input[name=price]").val(rs.data.roomPrice);
                        jQuery("input[name=money]").val(rs.data.money);
                        var om = rs.data.orderMoney
                        if (om == null) {
                            om = 0;
                        }
                        jQuery("input[name=qita]").val(om);
                        jQuery("input[name=inTime]").val(rs.data.createDate);
                        jQuery("input[name=roomType]").val(rs.data.roomTypeName);
                        //显示隐藏的部分
                        // jQuery(".aaa").show(1000);
                        //入住天数
                        jQuery("input[name=days]").val(rs.data.days);
                        jQuery("input[name=yh]").val(rs.data.vipRate != null ? rs.data.vipRate : 1);
                        //总消费金额
                        jQuery("input[name=cost]").val(jQuery("input[name=yh]").val() * (rs.data.roomPrice * rs.data.days + rs.data.money));
                        jQuery("input[name=total]").val(rs.data.cost);
                        jQuery("input[name=iriId]").val(rs.data.iriId);
                    },
                    error: function (rs) {
                        window.alert("out.html页面的ajax请求出错了");
                    }
                });
            });

            //优惠金额
            /!* jQuery("input[name=yh]").change(function(){
                var yhMoney = jQuery(this).val();
                var cost = jQuery("input[name=cost]").val();
                cost = cost-yhMoney;
                jQuery("input[name=cost]").val(cost);
            }); *!/
            /!*jQuery("input[name=yh]").keyup(function(){
                var yhMoney = jQuery(this).val();
                var cost = jQuery("input[name=total]").val();
                cost = cost*yhMoney;
                jQuery("input[name=cost]").val(cost);
            });*!/
        });*/
    </script>
    <script type="text/javascript">
        $("#usual1 ul").idTabs();
    </script>
    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
        !function () {
            laydate.skin('qianhuang');
            laydate({elem: '#Calendar'});
            laydate.skin('qianhuang');
            laydate({elem: '#Calendar2'});
        }();
        $(function dd() {
            var d = new Date(), str = "";
            str += (d.getFullYear() + "-");
            str += "0";
            str += (d.getMonth() + 1 + "-");
            str += d.getDate();
            //获取时分秒
            str += " " + d.getHours() + ":";
            str += d.getMinutes() + ":"
            str += d.getSeconds();
            $("#Calendar").attr("value", str);
            $("#Calendar2").attr("value", str);
        });

    </script>
</div>
</body>
</html>
